{% extends 'my_admin/table_index.html' %}
{% load tags %}

{% block custome_css %}
    <style>
        .filter-select-box {
            height: 250px !important;
            width: 100%;
            border-radius: 5px;

        }
    </style>
{% endblock %}

{% block continer %}
    <form class="form-horizontal" role="form" method="post">
        {% csrf_token %}
{#        <span style="color: red">{{ form_obj.errors }}</span>#}
        {% for field in form_obj %}
            <div class="form-group">
                <label for="" class="col-sm-2 control-label" style="font-weight: normal">
                    {% if field.field.required %}
                        <b>{{ field.label }}</b>
                    {% else %}
                        {{ field.label }}
                    {% endif %}
                </label>
                {% if field.name in admin_class.filter_horizontal %}
                    <div class="col-md-9 col-sm-9">
                        <div class="col-md-5 col-sm-5">
                            {% render_standby_items form_obj admin_class field as  standby_items%}
                            <select id="id_{{ field.name }}_from" multiple class="filter-select-box">
                                {% if field.name in admin_class.readonly_fields and not is_add_form %}
                                    {% for item in standby_items %}
                                        <option value="{{ item.id }}" disabled="disabled">{{ item }}</option>
                                    {% endfor %}
                                    </select>
                                {% else %}
                                    {% for item in standby_items %}
                                        <option value="{{ item.id }}" ondblclick="moveElementTo(this,'id_{{ field.name }}_from','id_{{ field.name }}_to');">{{ item }}</option>
                                    {% endfor %}
                                    </select>
                                    <a href="#" role="move_all" class="pull-right">选择全部<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
                                {% endif %}
                        </div>
                        <div class="col-md-2 col-sm-2" style="line-height: 130px;">
                            <div>选择<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></div>
                            <div><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>取消</div>
                        </div>
                        <div class="col-md-5 col-sm-5">
                            {% render_selected_items  form_obj field as  selected_items%}
                            <select name="{{ field.name }}" role="chosen_list" id="id_{{ field.name }}_to" multiple class="filter-select-box">
                                {% if field.name in admin_class.readonly_fields and not is_add_form %}
                                    {% for item in selected_items %}
                                       <option value="{{ item.id }}"disabled = "disabled">{{ item }}</option>
                                    {% endfor %}
                                    </select>
                                {% else %}
                                    {% for item in selected_items %}
                                        <option value="{{ item.id }}" ondblclick="moveElementTo(this,'id_{{ field.name }}_to','id_{{ field.name }}_from');">{{ item }}</option>
                                    {% endfor %}
                                    </select>
                                    <a href="#" role="move_all" class="pull-left"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>选择全部</a>
                                {% endif %}
                                                {% for error_data in field.errors.get_json_data %}
                            <span style="color: red; margin-right: 5px">{{ error_data.message }};</span>
                        {% endfor %}

                        </div>
                    </div>
                {% else %}
                    <div class="col-md-4 col-sm-4">
                        {{ field }}{{ field.help_text }}
                        {% for error_data in field.errors.get_json_data %}
                            <span style="color: red; margin-right: 5px">{{ error_data.message }};</span>
                        {% endfor %}

                    </div>
                {% endif %}
            </div>
        {% endfor %}

        <div class="form-group">
            <div class="col-sm-10">
                {% if not admin_class.readonly_table %}
                    {% if form_obj.instance.id %}
                        <a class="btn btn-danger pull-right" href="{% url 'delete_confirm' app_name table_name form_obj.instance.id %}">Delete</a>
                    {% endif %}
                    <button type="submit" class="btn btn-success pull-right" style="margin-right: 5px">Save</button>
                {% endif %}
            </div>
        </div>

    </form>
{% endblock %}

{% block custome_js %}
    <script>
       function moveElementTo(ele,from,to) {
           new_ele = '<option value=\"'+$(ele).val()+'\" ondblclick=\"moveElementTo(this,\''+to+'\',\''+from+'\')\">'+$(ele).text()+'</option>';
           $('#'+to).append(new_ele);
           $(ele).remove();
       }
       $(function () {
           $('a[role="move_all"]').click(function () {
               $(this).prev().find('option').each(function () {
                   $(this).trigger('dblclick');
               });
               return false;
           });
           $('form').submit(function () {
                $('select[role="chosen_list"] option').each(function () {
                    $(this).prop('selected', true);
                });
                $(this).find('[disabled="disabled"]').removeAttr('disabled');
               return true;
           });

       });

    </script>
    


{% endblock %}